import type { GlobalThemeOverrides } from 'naive-ui'
import { reactive } from 'vue'

export const color = 'rgba(95, 177, 127, 1)'
const hoverColor = 'rgba(95, 177, 127, 0.15)'

export const themeOverrides: GlobalThemeOverrides = reactive({
  common: {
    primaryColor: color,
    primaryColorHover: color,

    textColor1: '#333333',
    textColorDisabled: '#97a8be',

    hoverColor,
    iconColor: color,

    errorColor: '#FD4A29',
    errorColorHover: '#FD4A29',
    errorColorPressed: '#FD4A29',
    errorColorSuppl: '#FD4A29',

    fontSize: '14rem',
    fontSizeMedium: '14rem',

    headerColor: '#FFFCF7',

    fontFamily: `"PingFangSC, Inter var experimental", "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`
  },
  Tooltip: {
    color: '#ffffff',
    textColor: 'black'
  },
  DataTable: {
    thColor: '#F1F1F1',
    thFontWeight: 500,
    tdColor: '#EBECEB',
    tdColorHover: '#F1F1F1'
  },
  Form: {
    labelFontSizeLeftMedium: '14rem'
  },
  Pagination: {
    itemColor: '#ffffff',
    itemColorActive: color,
    itemColorActiveHover: color,
    itemColorHover: hoverColor,
    itemTextColorActive: '#ffffff',
    buttonColor: '#ffffff',
    buttonColorHover: '#ffffff',
    itemFontSizeMedium: '14rem'
  },
  Dialog: {
    color: '#E1E1E1'
  },
  Result:{
    fontSizeMedium:'14rem'
  }
})
